<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/vue.min.js"></script>
    <style>
        .warn{
            display: block;
            color: red;
        }
    </style>
    <title></title>
</head>
<body>
    <div id="app">
        <fieldset>
            <legend>商品详情</legend>
            <p>
                <label>商品ID：</label>
                <input type="text" v-model="proID">
            </p>
            <p>
                <label>商品名称：</label>
                <input type="text" v-model="proName">
                <span v-bind:class="{warn:!isValid}">商品名称不能为空！</span>
            </p>
        </fieldset>
    </div>
    <script>
        var vm=new Vue(
            {
                el:"#app",
                data:{
                    proID:"20",
                    proName:"华为P20",
                    isValid:true
                },
                watch:{
                    proName:function(a,b){
                        if(a==""){
                            this.isValid=false;
                        }
                        else{
                            this.isValid=true;
                        }
                    }
                }
            }
        );
    </script>
</body>
</html>